<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的简历</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="section-header">
    <nav class="nav">
      <div class="container">
        <div class="row">
          <div class="nav-item col-md-2"><a href="#about" data-index="1" class="about">关于</a></div>
          <div class="nav-item col-md-2"><a href="#works" data-index="2" class="works">作品</a></div>
          <div class="nav-item col-md-4 back-home"><a href="#home" data-index="0" class="home-a"></a></div>
          <div class="nav-item col-md-2"><a href="#skill" data-index="3" section-name=".skill-section" class="skill">能力</a></div>
          <div class="nav-item col-md-2"><a href="#contact" data-index="4" section-name=".contact-section" class="contact">联系</a></div>
        </div>
      </div>
    </nav>
  </div>
  <div class="home">
    <div class="home-section">
      <p>Hi，我是 Ben</p>
      <p class="welcome">欢迎光临我的社区！</p>
      <p>想了解更多，往下滚动哦 ^_^</p>
    </div>
    <a class="scroll-tip" data-index="1"></a>
  </div>
  <div class="wrap about" id="about">
    <div class="about-section">
      <div class="line1">
        <span class="left-span">
          <img class="bio-icon bio-icon-1" src="./images/bio-icon-1.png" alt="">
        </span>
        <span class="right-span">
          <img class="bio-text bio-text-1" src="./images/bio-text-1.png" alt="">
        </span>
      </div>
      <div class="line2">
        <span class="left-span">
          <img class="bio-icon bio-icon-2" src="./images/bio-icon-2.png" alt="">
        </span>
        <span class="right-span">
          <img class="bio-text bio-text-2" src="./images/bio-text-2.png" alt="">
        </span>
      </div>
      <div class="line3">
        <span class="left-span">
          <img class="bio-icon bio-icon-3" src="./images/bio-icon-3.png" alt="">
        </span>
        <span class="right-span">
          <img class="bio-text bio-text-3" src="./images/bio-text-3.png" alt="">
        </span>
      </div>
    </div>
    <a class="scroll-tip" data-index="2"></a>
  </div>
  <div class="wrap" id="works">
    <div class="works-section">
      <div class="container">
        <div class="work-demo first">
          <img src="images/works/yizaojia.jpg" alt="">
          <div class="work-info">
            <h2>喜欢我做的东西就关注我把！</h2>
            <p>
              <strong>开发时间</strong>：2014年3月<br>
              <strong>工作详情</strong>：框架设计及前端制作。
            </p>
          </div>
        </div>
        <div class="work-demo">
          <img src="images/works/91zaojia.jpg" alt="">
          <div class="work-info">
            <h2>喜欢我做的东西就关注我把！</h2>
            <p>
              <strong>开发时间</strong>：2014年3月<br>
              <strong>工作详情</strong>：框架设计及前端制作。
            </p>
          </div>
        </div>
        <div class="work-demo">
          <img src="images/works/wenku.jpg" alt="">
          <div class="work-info">
            <h2>喜欢我做的东西就关注我把！</h2>
            <p>
              <strong>开发时间</strong>：2014年3月<br>
              <strong>工作详情</strong>：框架设计及前端制作。
            </p>
          </div>
        </div>
        <div class="work-demo first">
          <img src="images/works/shinedeliver.jpg" alt="">
          <div class="work-info">
            <h2>喜欢我做的东西就关注我把！</h2>
            <p>
              <strong>开发时间</strong>：2014年3月<br>
              <strong>工作详情</strong>：框架设计及前端制作。
            </p>
          </div>
        </div>
        <div class="work-demo">
          <img src="images/works/wxshop.jpg" alt="">
          <div class="work-info">
            <h2>喜欢我做的东西就关注我把！</h2>
            <p>
              <strong>开发时间</strong>：2014年3月<br>
              <strong>工作详情</strong>：框架设计及前端制作。
            </p>
          </div>
        </div>
      </div>
      <a class="more-link" href="/">查看更多</a>
    </div>
    <a class="scroll-tip" data-index="3" next-name=".skill-section"></a>
  </div>
  <div class="wrap" id="skill">
    <div class="skill-section">
      <h1>相关技能</h1>
      <ul>
        <li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构和代码。</li>
        <li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
        <li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
        <li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
        <li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
        <li class="fade fade3">熟悉EXTJS，Nodejs，MySQl，有一定 PHP 后端相关知识。</li>
        <li class="fade fade2">了解 Ajax 工作原理和实现方法。</li>
        <li class="fade fade2">对前端canvas，svg有一定了解。</li>
        <li class="fade fade1">了解手机前端开发jquerymobile，zeptojs及angularjs等。</li>
        <li class="fade fade4">服务器使用阿里云ECS，对 Linux 有一定了解。</li>
        <li class="fade fade2">喜欢接触新事物，有一定的自学能力。</li>
      </ul>
    </div>
    <a class="scroll-tip" data-index="4"></a>
  </div>
  <div class="wrap" id="contact">
    <div class="contact-section clearfix">
      <h1>联系本人</h1>
			<div class="left">
				<div class="contact-ways fade fade1">
					<h2>社交网络</h2>
					<ul>
						<li>邮箱：</li>
						<li>Q Q ：</li>
						<li>知乎：</li>
						<li>微博：</li>
						<li>Github：</li>
					</ul>
				</div>
				<div class="contact-info fade fade2">
					<p>虽然有社交网络，但是平时上的比较少，很多时候是只看不发！不过你可以关注我哦！</p>
				</div>
			</div>
			<div class="right fade fade3">
				<h2>项目外包</h2>
				<p>如果你有前端相关的需求，可以联系我做外包，目前我主要做：</p>
				<ul>
					<li>网站布局设计及制作，网站页面制作。</li>
					<li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
					<li>企业网站建设及相关功能开发。</li>
					<li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
				</ul>
				<p><strong>适用浏览器</strong>：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
      </div>
    </div>
    <a class="scroll-tip" data-index="5"></a>
  </div>
  <script src="./js/jq.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>